<!--  -->
<template>
  <div>排班
   {{ list }}
  
    <el-table border :data="list" style="width: 100%">
    <el-table-column prop="type" label="" width="120" />
    <el-table-column v-for="item in weeks" :key="item" :label="item">
      <template #default="scope">
          <div v-for="sitem in scope.row[item]" class="item">
             <!-- <img src="1.jpg"> -->
             {{  sitem.staffPhoto}}
             <span>{{ sitem.staffName }}</span>
           </div>
      </template>
    </el-table-column>
  </el-table> 

  </div>
</template>

<script lang='ts' setup>
import { reactive,toRefs,ref,onMounted} from 'vue'

const weeks=["周一","周二","周三","周四","周五","周六","周日"];

const list=ref<any>([])
const getData=()=>{

    //调接口 返回老人的排班情况
    let _list=[
        {
                "id": 5,
                "elderlyId": 20,
                "day": "白班",
                "week": "周五",
                "staffId": 3,
                "staffName": "李四",
                "staffPhoto": "1.jpg"
            },
            {
                "id": 5,
                "elderlyId": 20,
                "day": "夜班",
                "week": "周三",
                "staffId": 3,
                "staffName": "王五",
                "staffPhoto": "1.jpg"
            },
            {
                "id": 5,
                "elderlyId": 20,
                "day": "白班",
                "week": "周一",
                "staffId": 3,
                "staffName": "李四",
                "staffPhoto": "1.jpg"
            },
            {
                "id": 2,
                "elderlyId": 20,
                "day": "白班",
                "week": "周一",
                "staffId": 3,
                "staffName": "李四",
                "staffPhoto": "1.jpg"
            }
            ,
            {
                "id": 2,
                "elderlyId": 20,
                "day": "夜班",
                "week": "周一",
                "staffId": 3,
                "staffName": "李四2",
                "staffPhoto": "1.jpg"
            }
            ,
            {
                "id": 2,
                "elderlyId": 20,
                "day": "夜班",
                "week": "周六",
                "staffId": 3,
                "staffName": "李四2",
                "staffPhoto": "1.jpg"
            }
        ]

     let obj:any={type:"白班"}
     let obj2:any={type:"夜班"}
    weeks.forEach((item:any,index:number)=>{

        obj[item]=_list.filter((sitem:any)=>sitem.day==obj.type && sitem.week==item);
        obj2[item]=_list.filter((sitem:any)=>sitem.day==obj2.type && sitem.week==item);

    })

    list.value.push(obj);
    list.value.push(obj2);

}
onMounted(()=>{
    getData();
})
// const list=[
  
//   {
//      type:"白班",
//      周一:null,
//      周二:null,
//      周三:null,
//  },
// {
//      type:"夜班",
//      周一:null,
//      周二:null,
//      周三:null,
//  }
 
// ]
</script>
<style scoped>
:deep(.el-table){
  --el-fill-color-light: none;
}
</style>